import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  name: string;

  private imgUrl = 'http://via.placeholder.com/350x150';

  private left = 1;
  private right = 2;

  private divClass: string;

  private isDev = false;

  private ngClass = {
    a: true,
    b: false,
    c: true
  };

  private ngStyle = {
    background: 'yellow',
    color: 'red'
  };

  ngOnInit() {
    this.delay(() => this.divClass = 'a b c');
    this.delay(() => this.isDev = true);
    this.delay(() => this.ngClass = {
      a: false,
      b: true,
      c: false
    });
    this.delay(() => this.ngStyle = {
      background: 'red',
      color: 'yellow'
    });


  }

  delay(func: Function) {
    setTimeout(func, 3000 * Math.random());
  }

  doOnClick(event) {
    console.log(event);
  }

  doOnInput(event) {
    const element = event.target;
    console.log(element.value); // DOM属性
    console.log(element.getAttribute('value')); // html属性，保持初始值
  }



}
